<!--
 * @Author: your name
 * @Date: 2021-12-09 10:58:10
 * @LastEditTime: 2021-12-30 16:02:16
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \geek-admin-test\src\App.vue
-->
<!---
<template>
  <div>
    <router-link to="/">首页</router-link> | 
    <router-link to="/about">关于</router-link>  | 
    <router-link to="/rate">评分</router-link>  |
    <router-link to="/count">vuex的使用</router-link> |
    <router-link to="/head">JSX的使用</router-link> |
    <router-link to="/todojsx">JSX的使用2</router-link> |
    <router-link to="/vts">TS的使用</router-link> |
  </div>
  <router-view></router-view>
</template>
--->

<template>
  <el-container>
    <el-header>
       <div class="box">
        <div class="toggle_button" @click="toggleCollapse">
          <i v-if="!isCollapse" class="el-icon-s-fold"></i>
          <i v-else class="el-icon-s-unfold"></i>
        </div>
       </div>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <!-- //侧边栏菜单区域 -->
        <el-menu background-color="#304156" text-color="#BFCBD9" active-text-color="#409eff" unique-opened :collapse="isCollapse" :collapse-transition="false" :default-active="activePath" router>
          <!-- 一级菜单 -->
          <template v-for="item in menulist">
            <template v-if="item.children">
              <el-submenu :index="item.id + ''" :key="item.id">
                <!-- 一级菜单的模板区 -->
                <template slot="title">
                  <!-- 图标 -->
                  <i :class="iconsObj[item.id]"></i>
                  <!-- 文本 -->
                  <span slot="title">{{ item.authName }}</span>
                </template>
                <!-- 二级菜单 -->
                <el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveNavState('/' + subItem.path)">
                  <template slot="title">
                    <!-- 图标 -->
                    <i class="el-icon-menu"></i>
                    <!-- 文本 -->
                    <span>{{ subItem.authName }}</span>
                  </template>
                </el-menu-item>
              </el-submenu>
            </template>
            <template v-else>
              <el-menu-item :index="'/' + item.path" :key="item.id" @click="saveNavState('/' + item.path)">
                <!-- 图标 -->
                <i :class="iconsObj[item.id]"></i>
                <!-- <i class="el-icon-menu"></i> -->
                <!-- 文本 -->
                <span slot="title">{{ item.authName }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    let isCollapse = ref(true);
    let menulist = ref([
      
        {
          id: 101,
          authName: '首页',
          path: 'dashboard',
          order: 1
        },
        {
          id: 102,
          authName: '关于',
          path: 'about',
          order: 2
        },
        {
          id: 103,
          authName: '评分',
          path: 'rate',
          order: 3
        },
        {
          id: 104,
          authName: 'vuex的使用',
          path: 'count',
          order: 4
        },
        {
          id: 105,
          authName: 'JSX的使用',
          path: 'head',
          order: 5
        },
        {
          id: 106,
          authName: 'JSX的使用2',
          path: 'todojsx',
          order: 6
        },
        {
          id: 107,
          authName: 'TS的使用',
          path: 'vts',
          order: 7
        },
         {
          id: 108,
          authName: 'Ecahrts的使用',
          path: 'echarts',
          order: 8
        },
        {
          id: 109,
          authName: '鼠标移动',
          path: 'mousemove',
          order: 9
        },
    ])
    let  iconsObj = ref({
      
        101: 'el-icon-s-help',
        102: 'el-icon-camera-solid',
        103: 'el-icon-s-cooperation',
        104: 'el-icon-s-promotion',
        105: 'el-icon-s-shop',
        106: 'el-icon-s-opportunity',
        107: 'el-icon-message-solid',
        108: 'el-icon-s-promotion',
        109:'el-icon-platform-eleme'

      
    }) 
    let activePath = ref('')
    function saveNavState(val) {
      window.sessionStorage.setItem('activePath', val)
      activePath.value = val
    }
    function handleOpen(key, keyPath) {
      console.log(key, keyPath);
    }
    function handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
    function toggleCollapse() {
   
      isCollapse.value = !isCollapse.value;
    }
    return {activePath, isCollapse, handleOpen, handleClose,toggleCollapse,menulist,iconsObj,saveNavState };
  },
};
</script>
<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.box {
  height: 100%;
  width: 200px;
}
.toggle_button {
  width: 64px;
  height: 100%;
  font-size: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-aside{
  overflow: hidden;
}
</style>
